<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
// 引入公共组件
import Header from '../components/Header.vue'
import BackToTop from '../components/BackToTop.vue'
import FloatContact from '../components/FloatContact.vue'

const router = useRouter()

// 图片数据
const images = ref<Array<{id: number, url: string, title: string}>>([])

// 轮播图相关
const currentSlide = ref(0)
const slideInterval = ref<number | null>(null)
const isTransitioning = ref(false)

// 图片放大查看相关
const isImageViewerOpen = ref(false)
const currentImage = ref<{url: string, title: string} | null>(null)

// 粒子效果相关
const particles = ref<Array<{x: number, y: number, size: number, speedX: number, speedY: number, opacity: number}>>([])

// 初始化图片数据
const initImages = () => {
  // 使用本地静态图片
  images.value = Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    url: `/static/images/image${i + 1}.jpg`,
    title: `三毛流浪记 ${i + 1}`
  }))
}

// 初始化粒子效果
const initParticles = () => {
  particles.value = []
  for (let i = 0; i < 100; i++) {
    particles.value.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      size: Math.random() * 3 + 1,
      speedX: (Math.random() - 0.5) * 0.5,
      speedY: (Math.random() - 0.5) * 0.5,
      opacity: Math.random() * 0.5 + 0.1
    })
  }
}

// 更新粒子动画
const updateParticles = () => {
  particles.value.forEach(particle => {
    particle.x += particle.speedX
    particle.y += particle.speedY
    
    // 边界检测
    if (particle.x > window.innerWidth) particle.x = 0
    if (particle.x < 0) particle.x = window.innerWidth
    if (particle.y > window.innerHeight) particle.y = 0
    if (particle.y < 0) particle.y = window.innerHeight
  })
}

const goToMusicPage = () => {
  router.push('/music')
}

// 轮播图控制函数（更丝滑的过渡效果）
const nextSlide = () => {
  if (images.value.length > 0 && !isTransitioning.value) {
    isTransitioning.value = true
    setTimeout(() => {
      currentSlide.value = (currentSlide.value + 1) % images.value.length
      isTransitioning.value = false
    }, 10) // 很短的延迟来触发过渡效果
  }
}

const prevSlide = () => {
  if (images.value.length > 0 && !isTransitioning.value) {
    isTransitioning.value = true
    setTimeout(() => {
      currentSlide.value = (currentSlide.value - 1 + images.value.length) % images.value.length
      isTransitioning.value = false
    }, 10) // 很短的延迟来触发过渡效果
  }
}

// 图片查看器功能
const openImageViewer = (image: {url: string, title: string}) => {
  currentImage.value = image
  isImageViewerOpen.value = true
  // 禁止背景滚动
  document.body.style.overflow = 'hidden'
}

const closeImageViewer = () => {
  isImageViewerOpen.value = false
  currentImage.value = null
  // 恢复背景滚动
  document.body.style.overflow = ''
}

// 点击遮罩层关闭图片查看器
const handleOverlayClick = (event: MouseEvent) => {
  if (event.target === event.currentTarget) {
    closeImageViewer()
  }
}

// 开始自动轮播
const startSlideShow = () => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value)
  }
  slideInterval.value = window.setInterval(() => {
    nextSlide()
  }, 5000) // 每5秒切换一次
}

// 停止自动轮播
const stopSlideShow = () => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value)
    slideInterval.value = null
  }
}

// 动画循环
let animationFrameId: number
const animate = () => {
  updateParticles()
  animationFrameId = requestAnimationFrame(animate)
}

// 生命周期钩子
onMounted(() => {
  initImages()
  initParticles()
  animate()
  startSlideShow()
  
  // 添加窗口大小调整监听器
  window.addEventListener('resize', initParticles)
})

onUnmounted(() => {
  stopSlideShow()
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
  }
  window.removeEventListener('resize', initParticles)
  // 确保恢复滚动
  document.body.style.overflow = ''
})
</script>

<template>
  <div class="gallery-container">
    <!-- 背景特效容器 -->
    <div class="background-effects"></div>
    
    <!-- 页面头部 -->
    <Header />
    
    <!-- 粒子背景 -->
    <div class="particles-container">
      <div 
        v-for="(particle, index) in particles" 
        :key="index"
        class="particle"
        :style="{
          left: particle.x + 'px',
          top: particle.y + 'px',
          width: particle.size + 'px',
          height: particle.size + 'px',
          opacity: particle.opacity
        }"
      ></div>
    </div>
    
    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <div class="carousel-wrapper">
        <transition name="slide" mode="out-in">
          <div 
            class="carousel-slide" 
            v-if="images.length > 0"
            :key="currentSlide"
          >
            <!-- 使用img标签替代background-image -->
            <img 
              :src="images[currentSlide].url" 
              :alt="images[currentSlide].title"
              class="carousel-image"
            />
            <div class="carousel-content">
              <!-- 移除了标题和描述文字 -->
              <button @click="goToMusicPage" class="music-btn">欣赏音乐《三毛流浪记》</button>
            </div>
          </div>
        </transition>
      </div>
      
      <!-- 轮播图导航按钮 -->
      <button class="carousel-nav prev" @click="prevSlide">‹</button>
      <button class="carousel-nav next" @click="nextSlide">›</button>
      
      <!-- 轮播图指示器 -->
      <div class="carousel-indicators">
        <span 
          v-for="(image, index) in images.slice(0, 5)" 
          :key="image.id"
          class="indicator"
          :class="{ active: index === currentSlide }"
          @click="currentSlide = index"
        ></span>
      </div>
    </div>
    
    <div class="gallery-grid-container">
      <div class="gallery-grid">
        <div 
          v-for="image in images" 
          :key="image.id"
          class="gallery-item"
        >
          <div class="image-wrapper">
            <img 
              :src="image.url" 
              :alt="image.title"
              class="gallery-image"
              loading="lazy"
              @click="openImageViewer(image)"
            />
            <div class="image-overlay">
              <div class="image-title">{{ image.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片查看器模态框 -->
    <div v-if="isImageViewerOpen && currentImage">
      <transition name="image-viewer" appear>
        <div 
          class="image-viewer"
          @click="handleOverlayClick"
        >
          <div class="image-viewer-content">
            <img :src="currentImage.url" :alt="currentImage.title" class="viewer-image" />
            <div class="viewer-title">{{ currentImage.title }}</div>
          </div>
        </div>
      </transition>
    </div>
    
    <!-- 添加更大的页脚空白，确保最后几张图片不会被遮挡 -->
    <div class="gallery-footer"></div>
    
    <!-- 回到顶部组件 -->
    <BackToTop />
    <FloatContact />
  </div>
</template>

<style scoped>
.gallery-container {
  padding: 0; /* 移除容器内边距 */
  /* 淡灰色背景 */
  background: #f8f8f8;
  min-height: calc(100vh - 60px); /* 考虑头部组件的高度 */
  /* 确保内容可以正常滚动 */
  overflow-y: visible;
  position: relative;
  padding-top: 0;
  box-sizing: border-box;
}

/* 夜间模式适配 */
body.dark-mode .gallery-container {
  background: #181a1b !important;
}

body.dark-mode .carousel-container {
  background: #232324 !important;
}

body.dark-mode .carousel-content {
  background: rgba(30, 30, 30, 0.7);
  color: #eee;
}

body.dark-mode .music-btn {
  background: rgba(40, 40, 40, 0.7);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .music-btn:hover {
  background: rgba(60, 60, 60, 0.9);
}

body.dark-mode .carousel-nav {
  background: rgba(40, 40, 40, 0.7);
  color: #eee;
}

body.dark-mode .carousel-nav:hover {
  background: rgba(60, 60, 60, 0.9);
}

body.dark-mode .indicator {
  background: rgba(255,255,255,0.2);
}

body.dark-mode .indicator.active {
  background: #fff;
}

body.dark-mode .gallery-grid-container {
  /* 可选：无特别变化 */
}

body.dark-mode .gallery-item {
  /* 可选：无特别变化 */
}

body.dark-mode .image-wrapper {
  background: #232324;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

body.dark-mode .image-overlay {
  background: rgba(30, 30, 30, 0.8);
  color: #eee;
}

body.dark-mode .image-title {
  color: #eee;
}

body.dark-mode .viewer-title {
  background: rgba(30, 30, 30, 0.8);
  color: #eee;
}

body.dark-mode .image-viewer {
  background: rgba(0,0,0,0.7);
}

body.dark-mode .viewer-image {
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
}

/* 粒子背景样式 */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  background: rgba(100, 100, 100, 0.6); /* 改为灰色粒子 */
  border-radius: 50%;
  pointer-events: none;
}

/* 轮播图样式 */
.carousel-container {
  position: relative;
  width: 100%;
  height: 400px; /* 固定高度可能造成图片显示不完整 */
  max-height: 60vh; /* 使用相对高度确保在不同屏幕尺寸下都能完整显示 */
  min-height: 300px; /* 设置最小高度 */
  /* 移除边框和圆角，使其与背景融为一体 */
  border-radius: 0;
  overflow: hidden;
  box-shadow: none; /* 移除阴影 */
  margin-bottom: 40px;
  z-index: 1; /* 确保轮播图在粒子背景之上 */
  background: #f0f0f0; /* 淡灰色背景 */
}

.carousel-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个区域且保持比例 */
  object-position: center; /* 图片居中显示 */
  display: block;
}

.carousel-content {
  position: absolute; /* 改为绝对定位 */
  bottom: 0; /* 定位在底部 */
  left: 0;
  right: 0;
  text-align: center;
  color: #333333; /* 深灰色文字 */
  z-index: 2;
  padding: 20px;
  margin-bottom: 30px; /* 底部间距 */
  background: rgba(255, 255, 255, 0.7); /* 添加半透明背景以提高文字可读性 */
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

.music-btn {
  background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  color: #333333; /* 深灰色文字 */
  border: 1px solid rgba(0, 0, 0, 0.1); /* 浅灰色边框 */
  padding: 12px 30px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  backdrop-filter: blur(5px);
  margin-top: 15px;
}

.music-btn:hover {
  background: rgba(255, 255, 255, 0.9); /* 更不透明的背景 */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 更浅的阴影 */
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  color: #333333; /* 深灰色文字 */
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
}

.carousel-nav:hover {
  background: rgba(255, 255, 255, 0.9); /* 更不透明的背景 */
}

.carousel-nav.prev {
  left: 20px;
}

.carousel-nav.next {
  right: 20px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

/* 图片网格区域 */
.gallery-grid-container {
  padding: 0 20px 20px; /* 添加容器内边距 */
  position: relative;
  z-index: 1;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
  /* 确保网格可以正常扩展 */
  width: 100%;
}

.gallery-item {
  perspective: 1000px;
  /* 确保项目可以正常显示 */
  display: block;
}

.image-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 更浅的阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 4/3;
  background: #e0e0e0; /* 淡灰色背景 */
  /* 确保图片容器可以正常显示 */
  display: block;
  cursor: pointer; /* 添加手指光标 */
}

.image-wrapper:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 更浅的阴影 */
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片完全覆盖容器并保持宽高比 */
  object-position: center; /* 确保图片居中显示 */
  display: block;
  transition: transform 0.5s ease;
}

.image-wrapper:hover .gallery-image {
  transform: scale(1.05); /* 鼠标悬停时图片轻微放大 */
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  color: #333333; /* 深灰色文字 */
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2; /* 确保覆盖在图片上方 */
}

.image-wrapper:hover .image-overlay {
  transform: translateY(0);
}

.image-title {
  font-size: 1.1rem;
  font-weight: 500;
}

/* 修改页脚空白区域的高度 */
.gallery-footer {
  height: 50px; /* 减小底部空白，因为现在有了统一的页脚 */
}

/* 轮播图过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: all 0.8s ease-in-out;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

/* 图片查看器模态框样式 */
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 修改遮罩层背景为更透明，可以看到底下的内容 */
  background: rgba(0, 0, 0, 0.1); /* 更透明的遮罩 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(1px); /* 轻微的模糊效果 */
}

.image-viewer-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.viewer-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  /* 添加更明显的阴影效果，使图片在透明背景上更突出 */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); /* 更浅的阴影 */
  border: 2px solid rgba(0, 0, 0, 0.05); /* 浅灰色边框 */
}

.viewer-title {
  color: #333333; /* 深灰色文字 */
  font-size: 1.2rem;
  margin-top: 20px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 更浅的文字阴影 */
  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  padding: 8px 16px;
  border-radius: 20px;
}

/* 图片查看器过渡动画 */
.image-viewer-enter-active, .image-viewer-leave-active {
  transition: all 0.3s ease;
}

.image-viewer-enter-from, .image-viewer-leave-to {
  opacity: 0;
  backdrop-filter: blur(0px);
}

.image-viewer-enter-to, .image-viewer-leave-from {
  opacity: 1;
  backdrop-filter: blur(1px);
}

/* 图片查看器内容过渡动画 */
.image-viewer-content {
  transition: all 0.3s ease;
}

.image-viewer-enter-from .image-viewer-content, .image-viewer-leave-to .image-viewer-content {
  transform: scale(0.8);
}

.image-viewer-enter-to .image-viewer-content, .image-viewer-leave-from .image-viewer-content {
  transform: scale(1);
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .carousel-container {
    height: 300px;
  }
  
  .gallery-grid-container {
    padding: 0 15px 15px;
  }
  
  .gallery-footer {
    height: 80px;
  }
  
  .carousel-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .carousel-nav.prev {
    left: 10px;
  }
  
  .carousel-nav.next {
    right: 10px;
  }
  
  .carousel-content {
    margin-bottom: 20px;
  }
  
  .viewer-image {
    max-width: 95vw;
    max-height: 70vh;
  }
}
</style>